<template>
  <div>
    <h1>App</h1>
  </div>
  <GrandChild class="grand"></GrandChild>
  <Child></Child>
</template>
<script setup lang="ts">

// scoped：在组件的 style 标签中设置 scoped 属性
// 会使得该组件内模板的顶级标签打上唯一 data-v-hash 的属性
// 在该组件内的 css 选择器也会选择选择唯一 data-v-hash 属性标记的标签
// scoped 可以避免组件内的 css 选择器选择到组件外部元素，造成样式外泄

// 对于第三方组件库，常常需要修改组件内部的样式，由于采用了 scoped 属性，导致无法选择该标签
// 故在 css 选择器选择时，使用 :deep(选择器) 进行样式穿透进行深部选择

// 综上：在自定义组件时，使用 scoped 设置 css 样式，使得该样式仅会作用于组件内部，不会样式外泄
// 当使用组件时，尤其是第三方组件，当在外部需要修改组件内部样式时
// 需要对内部修改样式的标签选择器调用 :deep(选择器) 函数，进行样式穿透


import Child from './Child.vue'
import GrandChild from './GrandChild.vue'
</script>
<style scoped lang="less">
.grand{
  :deep(.h1){
    color: pink;
  }
}
</style>
